<template>
  <div class="news-container">
    <BaseHeader
      :navs="navs"
      :activeNav="activeNav"
      @nav-change="activeNav = $event"
    />

    <!-- 新闻类型切换 -->
    <div class="news-tabs">
      <div
        v-for="(tab, index) in newsTabs"
        :key="index"
        :class="['tab-item', { active: currentTab === tab.value }]"
        @click="currentTab = tab.value"
      >
        {{ tab.label }}
      </div>
    </div>
    <div class="news-content">
      <!-- 新闻列表 -->
      <div class="news-list">
        <div
          v-for="(item, index) in newsList"
          :key="index"
          class="news-item"
          @click="handleNewsItemClick(item)"
        >
          <div class="news-image">
            <img :src="item.image" :alt="item.title" />
          </div>
          <div class="news-info">
            <h3 class="news-title">{{ item.title }}</h3>
            <p class="news-desc">{{ item.description }}</p>
            <div class="news-meta">
              <span class="news-date">{{ item.date }}</span>
              <!-- <span class="news-views">阅读量：{{ item.views }}</span> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <BaseFooter />
    <RightContact />
  </div>
</template>

<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
import RightContact from "@/components/rightContact.vue";
export default {
  name: "News",
  components: { BaseHeader, BaseFooter, RightContact },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "新闻",
      newsTabs: [
        { label: "最新动态", value: "latest" },
        { label: "考试通知", value: "exam" },
        { label: "活动通知", value: "activity" },
      ],
      currentTab: "latest",
      newsList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    handleNewsItemClick(item) {
      this.$router.push({
        path: "/newsDetail",
        query: { id: item.id },
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchNewsList();
    },
    fetchNewsList() {
      // TODO: 根据 currentTab 和 currentPage 获取对应的新闻列表
      // 这里模拟一些数据
      this.newsList = [
        {
          title: "南山区成立信息学创新人才培养基地，育才集团和点猫科技荣获⋯",
          description:
            "8月26日，深圳市南山区”信息学创新人才培养基地”成立仪式在深圳市育才中学举行，点猫科技与深圳市蛇口育才教育集团共同发起成立深圳市南山区“信息学创新人才培养基地”。8月26日，深圳市南山区”信息学创新人才培养基地”成立仪式在深圳市育才中学举行，点猫科技与深圳市蛇口育才教育集团共同发起成立深圳市南山区“信息学创新人才培养基地”。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
          id: 1,
        },
        {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        },
        {
          title: "点猫科技与中国教育电视台达成战略合作，携",
          description:
            "6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。6月18日，点猫科技与中国教育电视台达成战略合作。中国教育电视台党委委员、技术管理办公室主任何爱新，点猫科技创始人兼CEO李天驰，以及相关部门负责人出席本次签约仪式。",
          image: require("@/assets/index/newlist.png"),
          date: "2024-03-20 星期二",
          views: 1234,
        },
      ];
    },
  },
  created() {
    this.fetchNewsList();
  },
};
</script>

<style scoped lang="scss">
.news-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.news-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.news-tabs {
  width: 100%;
  height: 52px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;

  .tab-item {
    padding: 10px 60px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &.active {
      color: #1664ff;
    }
  }
}

.news-list {
  cursor: pointer;
  .news-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .news-image {
      width: 380px;
      height: 235px;
      overflow: hidden;
      border-radius: 4px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .news-info {
      flex: 1;
      text-align: left;
      .news-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        display: -moz-box; /* 兼容Firefox */
        -moz-box-orient: vertical;
        -moz-line-clamp: 1;
        display: box; /* 兼容旧版Opera */
        box-orient: vertical;
        line-clamp: 1;
      }

      .news-desc {
        color: #666;
        margin-bottom: 10px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        display: -moz-box; /* 兼容Firefox */
        -moz-box-orient: vertical;
        -moz-line-clamp: 5;
        display: box; /* 兼容旧版Opera */
        box-orient: vertical;
        line-clamp: 5;
      }

      .news-meta {
        color: #999;
        font-size: 14px;
        margin-top: 60px;
        span {
          margin-right: 20px;
        }
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
